<div *ngIf="!model.selectToRankEnabled" [class]="model.rootClass" #contentElement>
  <ng-container *ngFor="let item of model.renderedRankingChoices; index as index; trackBy: trackItemBy">
    <ng-template [component]="{ name: getItemValueComponentName(item), data: getItemValueComponentData(item, index) }"></ng-template>
  </ng-container>
</div>

<div *ngIf="model.selectToRankEnabled" [class]="model.rootClass" #contentElement>
  <div [class]='model.getContainerClasses("from")' data-ranking="from-container">
    <ng-container *ngFor="let item of model.renderedUnRankingChoices; index as index; trackBy: trackItemBy">
      <ng-template [component]="{ name: getItemValueComponentName(item), data: getItemValueComponentData(item, index, true) }"></ng-template>
    </ng-container>

    <div *ngIf="model.renderedUnRankingChoices.length === 0" [class]="model.cssClasses.containerPlaceholder" [model]="$any(model).locSelectToRankEmptyRankedAreaText" sv-ng-string></div>
  </div>

  <div [class]="model.cssClasses.containersDivider"></div>

  <div [class]='model.getContainerClasses("to")' data-ranking="to-container">
    <ng-container *ngFor="let item of model.renderedRankingChoices; index as index; trackBy: trackItemBy">
      <ng-template [component]="{ name: getItemValueComponentName(item), data: getItemValueComponentData(item, index) }"></ng-template>
    </ng-container>

    <div *ngIf="model.renderedRankingChoices.length === 0" [class]="model.cssClasses.containerPlaceholder" [model]="$any(model).locSelectToRankEmptyUnrankedAreaText" sv-ng-string></div>
  </div>
</div>